<template>
  <view class="content">
    <view class="user-info">
      <!-- zwyHeightThree -->
      <view class="avatar">
        <text class="iconfont icon-touxiang" />
        <!-- <text class="iconfont icon-nv gender"/> -->
      </view>
      <text class="iconfont icon-nan gender" :style="{ background: 1 ? '#1DA1F3' : '#F86098' }" />
      <view class="msg">
        <view class="fisrt"> <text>姓名</text>59岁</view>
      </view>
    </view>
    <view class="tabs">
      <view class="item" v-for="(item, index) in tabs" :key="index" @click="$util.goUrl(item.url)">
        <text :class="['iconfont', item.icon]" :style="{ color: item.color }" />
        <view> {{ item.label }} </view>
      </view>
    </view>
    <view style="background: #fff">
      <basics-list ref="basicsList" @listClick="listClick" />
    </view>
  </view>
</template>

<script>
import basicsList from "@/components/basics-list/basics-list.vue";

export default {
  components: { basicsList },
  data() {
    return {
      tabs: [
        { icon: "icon-shujukanban", color: "#FFAFCC", label: "测量数据", url: "/pages/metricalData/index" },
        { icon: "icon-gerendangan", color: "#9BEE8B", label: "我的档案", url: "/pages/record/index" },
        { icon: "icon-xiaoxi", color: "#B8B0FB", label: "医生提醒", url: "/pages/tips/index" },
      ],
      urls: ["/pages/equipmentList/index", "/pages/myDoctor/index", "/pagesMy/about/about", "/pages/message/index"],
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: "医院名称" });
    this.$nextTick(() => {
      this.initBasicsList();
    });
  },
  methods: {
    //初始化列表
    initBasicsList() {
      let list = [
        { title: "我的设备", icon: "guanlianshebei", rightArrow: true },
        { title: "我的医生", icon: "yisheng", rightArrow: true },
        { title: "我的亲友", icon: "a-24-30_fuzhi-04", rightArrow: true },
        { title: "系统推送", icon: "tuisongxiaoxi", rightArrow: true },
      ];
      this.$refs.basicsList.initList(list);
    },
    listClick(index) {
      this.$util.goUrl(this.urls[index]);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: $back-grey-color;
  min-height: 100vh;
  .user-info {
    background: $theme-color;
    display: flex;
    padding: 0 60rpx 40rpx 60rpx;
    align-items: center;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 140rpx;
      overflow: hidden;
      margin-top: 6rpx;
      box-shadow: rgba(14, 14, 14, 0.5) 0px 6rpx 15rpx 0px;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      padding: 4rpx;
      .icon-touxiang {
        width: 100%;
        height: 100%;
        line-height: 100%;
        font-size: 160rpx;
        color: rgba(255, 255, 255, 0.7);
      }
      image {
        width: 100%;
        height: 100%;
      }
    }
    .gender {
      z-index: 100;
      font-size: 30rpx;
      margin: 100rpx 0 0 -60rpx;
      z-index: 100;
      background: blue;
      color: #fff;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 40rpx;
      border-radius: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.8);
    }
    .msg {
      color: #fff;
      margin-left: 40rpx;
      &-item {
        text:first-child {
          font-weight: bold;
          font-size: $big-font-size;
          margin-right: 40rpx;
        }
      }
    }
  }
  .tabs {
    display: flex;
    padding: 20rpx 0;
    margin: 20rpx 0;
    background: #fff;
    .item {
      width: 33.33vw;
      text-align: center;
      .iconfont {
        font-weight: bold;
        font-size: 80rpx;
      }
    }
  }
}
</style>
